import React from 'react';
import { Layout, Menu } from 'antd';
import { Link, useLocation } from 'react-router-dom';
import {
  DashboardOutlined,
  UserOutlined,
  AppstoreOutlined,
  ShoppingCartOutlined,
  GiftOutlined,
  BarChartOutlined,
  SettingOutlined,
  TrophyOutlined,
  UserAddOutlined,
  DollarOutlined,
  TeamOutlined,
  FileTextOutlined,
  PieChartOutlined,
  LineChartOutlined,
  AreaChartOutlined,
  FundOutlined,
  AccountBookOutlined,
  MoneyCollectOutlined
} from '@ant-design/icons';
import '../styles/modern-ui.css';

const { Header, Sider, Content } = Layout;

const LayoutWrapper = ({ children }) => {
  const location = useLocation();
  
  // 获取当前路径对应的菜单key
  const getSelectedKey = () => {
    const path = location.pathname;
    if (path === '/dashboard') return ['dashboard'];
    if (path === '/users') return ['users'];
    if (path === '/menu') return ['menu'];
    if (path === '/orders') return ['orders'];
    if (path === '/coupons') return ['coupons'];
    if (path === '/social-review') return ['social-review'];
    if (path === '/invite-management') return ['invite-management'];
    if (path === '/reports') return ['reports'];
    if (path === '/system') return ['system'];
    return ['dashboard'];
  };

  return (
    <Layout style={{ 
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
    }}>
      <Sider 
        width={200} 
        style={{ 
          background: 'rgba(255, 255, 255, 0.95)',
          backdropFilter: 'blur(20px)',
          borderRight: '1px solid rgba(0, 0, 0, 0.06)',
          boxShadow: '4px 0 24px rgba(0, 0, 0, 0.08)'
        }}
      >
        <div style={{ 
          padding: '20px 16px', 
          borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          margin: '8px',
          borderRadius: '12px',
          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
        }}>
          <h3 style={{ 
            color: '#fff', 
            margin: 0, 
            textAlign: 'center',
            fontWeight: '600',
            textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
          }}>管理后台</h3>
        </div>
        <Menu
          mode="inline"
          selectedKeys={getSelectedKey()}
          style={{ 
            height: '100%', 
            borderRight: 0,
            background: 'transparent',
            padding: '8px'
          }}
          className="modern-menu"
          items={[
            { key: 'dashboard', icon: <DashboardOutlined />, label: <Link to="/dashboard">仪表盘</Link> },
            { key: 'users', icon: <UserOutlined />, label: <Link to="/users">用户管理</Link> },
            { key: 'menu', icon: <AppstoreOutlined />, label: <Link to="/menu">菜单管理</Link> },
            { key: 'orders', icon: <ShoppingCartOutlined />, label: <Link to="/orders">订单管理</Link> },
            { key: 'coupons', icon: <GiftOutlined />, label: <Link to="/coupons">优惠券管理</Link> },
            { key: 'social-review', icon: <TrophyOutlined />, label: <Link to="/social-review">社交媒体评价</Link> },
            { key: 'invite-management', icon: <UserAddOutlined />, label: <Link to="/invite-management">邀请管理</Link> },
            {
              key: 'reports',
              icon: <BarChartOutlined />,
              label: '报表分析',
              children: [
                {
                  key: 'sales-reports',
                  label: '销售报表',
                  icon: <PieChartOutlined />,
                  children: [
                    { key: 'daily-sales', label: <Link to="/reports?category=sales&type=daily">日销售报表</Link> },
                    { key: 'monthly-sales', label: <Link to="/reports?category=sales&type=monthly">月销售报表</Link> },
                    { key: 'product-sales', label: <Link to="/reports?category=sales&type=product">产品销售报表</Link> }
                  ]
                },
                {
                  key: 'user-reports',
                  label: '用户报表',
                  icon: <TeamOutlined />,
                  children: [
                    { key: 'user-growth', label: <Link to="/reports?category=users&type=growth">用户增长报表</Link> },
                    { key: 'user-activity', label: <Link to="/reports?category=users&type=activity">用户活跃度报表</Link> },
                    { key: 'user-retention', label: <Link to="/reports?category=users&type=retention">用户留存报表</Link> }
                  ]
                },
                {
                  key: 'financial-reports',
                  label: '财务报表',
                  icon: <DollarOutlined />,
                  children: [
                    { key: 'revenue-report', label: <Link to="/reports?category=financial&type=revenue">收入报表</Link> },
                    { key: 'cost-report', label: <Link to="/reports?category=financial&type=cost">成本报表</Link> },
                    { key: 'profit-report', label: <Link to="/reports?category=financial&type=profit">利润报表</Link> },
                    { key: 'tax-report', label: <Link to="/reports?category=financial&type=tax">税务报表</Link> }
                  ]
                }
              ]
            },
            { key: 'system', icon: <SettingOutlined />, label: <Link to="/system">系统管理</Link> }
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ 
          background: 'rgba(255, 255, 255, 0.95)', 
          padding: '0 32px', 
          borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
          backdropFilter: 'blur(20px)',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
          display: 'flex',
          alignItems: 'center'
        }}>
          <h2 style={{ 
            margin: 0,
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            fontWeight: '700',
            fontSize: '24px'
          }}>标准管理后台</h2>
        </Header>
        <Content style={{ 
          margin: '16px', 
          padding: 0, 
          background: 'transparent', 
          minHeight: 280,
          borderRadius: '16px',
          overflow: 'hidden'
        }} className="fade-in">
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default LayoutWrapper;